<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="lib/easeljs-0.7.1.min.js"></script>
	<script src="lib/tweenjs-0.5.1.min.js"></script>
</head>
<body onload="init()">
	<canvas id="mycanvas" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
</body>
</html>
<script>
	var stage,Rect;
	var leftkeydown,rightkeydown = false;
	function init() {
		stage = new createjs.Stage(document.getElementById("mycanvas"));
		createjs.Ticker.addEventListener("tick", tick)
		createjs.Ticker.setFPS(60);
		start();
	}
	function start(){
		Rect = new createjs.Shape();
		Rect.graphics.beginFill("blue").drawRect(0,0,100,50);
		Rect.x = Rect.nextX =0
		Rect.y = 100;
		stage.addChild(Rect)
		window.onkeydown = moveRect;
		window.onkeyup = stopRect;
	}
	function moveRect(e){
		e = !e ? window.event: e;
		switch (e.keyCode){
			case 37:
				leftkeydown = true;
				break;
			case 39:
				rightkeydown = true;
				break;}}
	function stopRect(e){
		e = !e ? window.event: e;
		switch (e.keyCode){
			case 37:
				leftkeydown = false;
				break;
			case 39:
				rightkeydown = false;
				break;}}
	function update(){
		var nextX = Rect.x;
		if(leftkeydown){
			nextX = Rect.x -10
			if(nextX<0){
				nextX =0
			}
		}else if(rightkeydown){
			nextX =Rect.x +10;
			if(nextX>stage.canvas.width-Rect.width){
				nextX = stage.canvas.width-Rect.width
			}
		}
		Rect.nextX = nextX;
		Rect.x =Rect.nextX
	}
	function tick(){
		update();
		stage.update();
	}

</script>